<template>
  <div class="contents">
    <div class="tab_box">
      <!-- <span v-for="(item,key) in firstType" :key="item.id" :class="{to_active:isShow==key+1}" @click="handleTab(key+1)">{{item.name}}</span> -->

      <div>
        <VuePerfectScrollbar class="edit-scroll-area">
          <div v-for="(item) in listData" :key="item.id" class="con_box">
            <p class="font_title">{{item.name}}</p>
            <div class="radio_bottom">
              <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(i) in item.pointList" :key="i.id"  :label="i.id">{{i.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>

        </VuePerfectScrollbar>
      </div>
    </div>
    <el-row :gutter="25">
      <el-col :span="12">
        <el-button size="small">取消</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar"; //滚动条
import { mapState, mapActions, mapMutations } from "vuex"
import { deepClone } from "@/util.js";
export default {
  props:{
    selectRow:{
      type:Object
    }
  },
  data() {
    return {
      checkList: [],
      isShow: 1,
      listData:[]
    };
  },
  components: {
    VuePerfectScrollbar,
  },
  methods: {
    handleTab(v) {
      this.isShow = v;
    },
  },
  mounted(){
    this.listData = deepClone(this.firstType);
    // console.log("++++++++++++",this.listData)
    // 一级分类查二级分类
    this.listData.map((item,key)=>{
      item.children = [];
      item.pointList = [];
      this.$api.mearsuringPointSetting.getSecondType({
        parentId: item.id
      }).then((res)=>{
        // console.log("二级分类",res)
        item.children.push(...res.data.data[0])

        item.children.map((i,k)=>{
          // console.log("++++++++++++++++++++++++==",i)
          i.children = [];
          // 获取下面所有的点
          this.$api.mearsuringPointSetting.getSecondTypePoint({
            ownId: this.initBridgeId,
            measurePointSecondTypeId:i.id
          }).then((res)=>{
            // console.log("获取点++++++++++",res.data.data)
            i.children.push(...res.data.data[0]);
            item.pointList.push(...res.data.data[0])

            // huoquo
            // console.log("最后的数据",this.listData)
            this.$forceUpdate()
          })
        })
      })
    })
  },
  beforeCreated(){

  },
  computed: {
     ...mapState("mpsModule", {
      firstType:"firstType",
      initBridgeId:"InitBridgeId",
      componentId:"componentId"
    }),
  },
  methods:{
    ...mapActions("mpsModule", {
      getPointListAction: "getPointList"

    }),
    save(){
      let _params = this.selectRow;

      delete _params._id;
        delete _params.createTime;
        delete _params.updateTime;
        _params.associationMeasurePointId = this.checkList
        this.$api.mearsuringPointSetting.uupdatePoint(_params).then((res)=>{
            if(res.data.success){
              this.$vs.notify({
                text: "修改成功",
                color: "success",
                icon: "success",
              });
            }
        })
    }
  },
  watch:{
    selectRow:{
      handler(newVal){
        this.checkList = newVal.associationMeasurePointId ? newVal.associationMeasurePointId : []
      // console.log("qqqqqqqqqqqqqqqqqqqqq",this.checkList)
      },
      immediate:true,
      deep:true
    }
  }
};
</script>
<style lang="scss" scoped>
.contents {
  .tab_box {
    .to_active {
      color: #327bdc;
      font-weight: 600;
    }
    span {
      display: inline-block;
      width: 86px;
      height: 44px;
      line-height: 44px;
    }
  }
  .con_box {
    // margin-top: 15px;
    .font_title {
      font-size: 14px;
      color: #bec4d0;
      font-weight: 600;
      // margin:0px 13px;
      height: 46px;
      line-height: 46px;
    }
    .radio_bottom {
      .el-checkbox {
        margin: 5px 47px 5px 0px;
      }
      border-bottom: 1px solid #d3dbeb;
      padding-bottom: 26px;
    }
  }
  .el-row {
    margin-top: 30px;
  }
  .el-col:nth-child(1) {
    text-align: right;
  }
}
.edit-scroll-area {
  position: relative;
  margin: auto;
  //   height: calc(100% - 300px);
  height: 480px;
  width: 100%;
}
</style>
